<template>
	<view class="content">
		<view class="title_div">
			账号密码登录
		</view>

		<view class="login_form" onsubmit="return false;">
			<view class="login_item">
				<input type="text" v-model="mobile" placeholder="请输入身份证号码" />
			</view>
			<view class="login_item">
				<input type="password" v-model="password" placeholder="请输入密码" />
			</view>
			<view class="login_item">
				 <input type="text" v-model="code" placeholder="请输入验证码" />
			<view class="register">				
					<view class="canvas-img-code" @click="refresh()">
					<canvas :style="{width:width+'px',height:height+'px'}" canvas-id="imgcanvas" @error="canvasIdErrorCallback"></canvas>
					</view>
			</view>
             </view>

			<button class="login_btn" @tap="loginSub">登录</button>

		</view>

		<view class="forget_div">
			<image src="../../static/btn_share_weixin.png"></image>
			<text @click="wxLogin()" class="wx_login">微信登录</text>
			<!-- <text>忘记密码?</text> -->
		</view>
		<view class="read_div">
			<radio-group @change="radioChange">
				<label class="radio">
					<radio value="r2" :checked="checkedFlag" />
					<text>我已阅读并同意
						<text class="blue_text">云时代网校用户协议</text>
						和
						<text class="blue_text">用户隐私协议</text>

					</text>

				</label>
			</radio-group>
		</view>

		
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				mobile: '',
				password: '',
				code: '', //微信临时登录凭证
				checkedFlag: false, //协议是否同意了
				verCode: "", //验证码
				width: 120,
				height: 45
			}
		},
		onLoad() {
			//判断是否已经登录过了
			var token = uni.getStorageSync('token');
			if (token != "" && token != null) {
				uni.switchTab({
					url: '../index/index'
				});
			}
		},
		onShow() {
				_this = this;
				setTimeout(function() {
					_this.init();
				}, 1000)
			},
		methods: {
			// 初始化验证码
					init: function() {
						console.log('start');
						var context = uni.createCanvasContext('imgcanvas', this),
							w = this.width,
							h = this.height;
						context.setFillStyle("white");
						context.setLineWidth(5);
						context.fillRect(0, 0, w, h);
						var pool = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "I", "M", "N", "O", "P", "Q", "R", "S",
								"T", "U", "V", "W", "S", "Y", "Z", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0"
							],
							str = '';
						for (var i = 0; i < 4; i++) {
							var c = pool[this.rn(0, pool.length - 1)];
							var deg = this.rn(-30, 30);
							context.setFontSize(18);
							context.setTextBaseline("top");
							context.setFillStyle(this.rc(80, 150));
							context.save();
							context.translate(30 * i + 15, parseInt(h / 1.5));
							context.rotate(deg * Math.PI / 180);
							context.fillText(c, -15 + 5, -15);
							context.restore();
							str += c;
						}
						uni.setStorage({
							key: 'imgcode',
							data: str,
						});
						for (var i = 0; i < 40; i++) {
							context.beginPath();
							context.arc(this.rn(0, w), this.rn(0, h), 1, 0, 2 * Math.PI);
							context.closePath();
							context.setFillStyle(this.rc(150, 200));
							context.fill();
						}
						context.draw();
						console.log('end');
					},
					rc: function(min, max) {
						var r = this.rn(min, max);
						var g = this.rn(min, max);
						var b = this.rn(min, max);
						return "rgb(" + r + "," + g + "," + b + ")";
					},
					rn: function(max, min) {
						return parseInt(Math.random() * (max - min)) + min;
					},
					refresh: function() {
						this.init();
					},
					canvasIdErrorCallback: function(e) {
						console.error(e.detail.errMsg)
					},

			wxLogin: function() {
				wx.login({
					success(res) {
						
						if (res.code) {
							//发起网络请求,传code
							var code=res.code;//把code传到后台
                              console.log(res);
						} else {
							console.log('登录失败！' + res.errMsg)
						}
					}
				})
			},
			loginSub: function() {
				console.log(this.checkedFlag);
				if (this.checkedFlag == false) {
					uni.showToast({
						title: '请先勾选协议'
					});
					return;
				};
				if (this.mobile == '') {
					uni.showToast({
						title: '请输入账号'
					});
					return;
				}

				if (this.password == '') {
					uni.showToast({
						title: '请输入密码'
					});
					return;
				}
				//登录请求
				uni.request({
					url: this.baseUrl + 'login', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						'mobile': this.mobile,
						'password': this.password
					},
					header: {
						'custom-header': 'hello' //自定义请求头信息
					},
					success: (res) => {
						this.text = 'request success';
						if (res.data.code == 0) {
							//TODO
							//登录成功之后把用户信息或者token存一下  
							uni.setStorageSync('token', res.data.token);
							uni.setStorageSync('uid', res.data.uid);
							console.log(uni.getStorageSync('token'));
							console.log(uni.getStorageSync('uid'));
							uni.switchTab({
								url: '../index/index'
							});
						} else {
							//alert(res.data.msg);
							console.log(res.data.msg);
						}
					}
				});
				//跳转到主页
				// uni.switchTab({
				// 	url: '../index/index'
				// });


			},
			radioChange: function(evt) {
				console.log("----" + evt.detail.value);
				if (evt.detail.value == 'r2') {
					this.checkedFlag = true;
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}

	.title_div {
		height: 156rpx;
		line-height: 156rpx;
		padding-left: 50rpx;
		padding-right: 50rpx;
		font-size: 50rpx;
		color: #333333;
	}

	.login_form {}

	.login_form .login_item {
		margin-left: 50rpx;
		margin-right: 50rpx;
		height: 100rpx;
		border-bottom: 1px solid #DADADA;
		display: flex;
	}

	.login_form .login_item input {
		height: 100rpx;
		font-size: 28rpx;
		color: #333333;
		padding-left: 30rpx;
		padding-right: 30rpx;

	}

	.login_btn {
		height: 88rpx;
		margin-left: 50rpx;
		margin-right: 50rpx;
		background: #e13b29;
		border-radius: 44rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		line-height: 88rpx;
		margin-top: 40rpx;
	}

	.forget_div {
		margin-top: 16rpx;
		height: 78rpx;
		margin-left: 50rpx;
		margin-right: 50rpx;
		display: flex;
		align-items: center;
	}

	.forget_div image {
		width: 36rpx;
		height: 36rpx;
	}

	.forget_div text {
		height: 78rpx;
		line-height: 78rpx;
		font-size: 24rpx;
		color: #727272;
	}

	.forget_div .wx_login {
		flex: 1;
		margin-left: 10rpx;
	}

	.read_div {
		padding-left: 50rpx;
		padding-right: 50rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 22rpx;
		color: #666666;
	}

	.read_div .blue_text {
		color: #59aae9;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}
</style>
